<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="../../WEB-INF/template.xhtml"
                xmlns:framework="http://java.sun.com/jsf/composite/components">
    <ui:define name="title">User Page</ui:define>
    <ui:define name="content">
        <h:form id="user_form">
            <div class="ui-g">
                <div class="ui-g-12">
                    <p:dataTable id="user_table" widgetVar="user_table"
                                 reflow="true" value="#{controller.dataModel}" var="element"
                                 lazy="true" rowKey="#{element.id}" rows="10" paginator="true"
                                 selection="#{viewScope.selectedUsers}"
                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 rowsPerPageTemplate="20,50,100" paginatorPosition="bottom"
                                 emptyMessage="#{msg['framework']['noRecords']}">
                        <f:facet name="header">
                            <p:outputPanel style="text-align: left;">
                                <div class="ui-inputgroup" style="display: inline;">
                                    <p:inputText id="globalFilter" placeholder="Enter keyword"/>
                                    <p:commandButton value="Search" icon="fa fa-search"
                                                     process="@form" onclick="PF('user_table').filter()"/>
                                </div>
                                <p:commandButton id="operationButton"
                                                 value="#{msg['framework']['operation']}" type="button"
                                                 icon="fa fa-chevron-down"/>
                                <p:tieredMenu overlay="true" trigger="operationButton"
                                              my="left top" at="left bottom">
                                    <p:menuitem id="edit" value="#{msg['framework']['edit']}"

                                                actionListener="#{controller.edit}" icon="fa fa-fw fa-edit"
                                                oncomplete="PF('user_dialog').show()"
                                                update=":user_dialog_form"/>
                                    <p:separator/>
                                    <p:menuitem id="delete" value="#{msg['framework']['delete']}"
                                                onclick="if(!isSelectedRecord('user_table')) return false"
                                                action="#{controller.delete}" icon="fa fa-fw fa-remove"
                                                update="user_table">
                                        <p:confirm header="提示" message="确定删除？"/>
                                    </p:menuitem>
                                </p:tieredMenu>

                            </p:outputPanel>
                        </f:facet>
                        <p:column selectionMode="multiple" style="width:16px;text-align:center"/>
                        <p:column headerText="#{msg['common']['username']}"
                                  sortBy="#{element.username}">
                            <h:outputText value="#{element.username}"/>
                        </p:column>
                        <p:column headerText="#{msg['common']['mobile']}"
                                  sortBy="#{element.name}">
                            <h:outputText value="#{element.mobile}"/>
                        </p:column>
                        <p:column headerText="#{msg['common']['email']}"
                                  sortBy="#{element.email}">
                            <h:outputText value="#{element.email}"/>
                        </p:column>
                        <p:column headerText="#{msg['common']['ipAddr']}"
                                  sortBy="#{element.ipAddr}">
                            <h:outputText value="#{element.ipAddr}"/>
                        </p:column>
                        <p:column headerText="#{msg['common']['macAddr']}"
                                  sortBy="#{element.macAddr}">
                            <h:outputText value="#{element.macAddr}"/>
                        </p:column>
                        <p:column headerText="#{msg['common']['type']}"
                                  sortBy="#{element.type}">
                            <h:outputText value="#{element.type}"/>
                        </p:column>
                        <p:column headerText="#{msg['common']['status']}"
                                  sortBy="#{element.status}">
                            <h:outputText value="#{element.status}"/>
                        </p:column>
                    </p:dataTable>
                </div>
            </div>
        </h:form>
    </ui:define>
    <ui:define name="dialog">
        <h:form id="user_dialog_form">
            <framework:entityDialog id="user_dialog"
                                    widgetVar="user_dialog" responsive="true"
                                    saveDisabled="#{viewScope.user == null}"
                                    saveUpdate=":user_form:user_table">
                <f:facet name="header">
                    <h:outputText rendered="#{viewScope.user.id != null}" value="#{msg['framework']['add']}"/>
                    <h:outputText rendered="#{viewScope.user.id == null}" value="#{msg['framework']['edit']}"/>
                </f:facet>


                <p:panelGrid columns="2" rendered="#{viewScope.user != null}"
                             columnClasses="ui-g-12 ui-md-3,ui-g-12 ui-md-9" layout="grid"
                             styleClass="ui-fluid"
                             style="border:0px none; background-color:transparent;">
                    <h:outputText value="#{msg['user']['role']}"/>
                    <p:pickList id="pickList" value="#{viewScope.roleModel}" var="role" itemLabel="#{role.name}"
                                itemValue="#{role}"/>
                    <h:outputText value="#{msg['user']['permission']}"/>


                </p:panelGrid>
            </framework:entityDialog></h:form>
    </ui:define>

</ui:composition>